<include file="default/public/header_common" />

<div class="am-u-sm-12  pl-0 pr-0">
  <div class="am-form am-form-horizontal address-form">
  <div id="errmsg"></div>
    <div class="am-form-group">
      <label for="user-name" class="am-u-sm-3 am-form-label">收件人&nbsp;</label>
      <div class="am-u-sm-9">
        <input type="text" id="userName" placeholder="姓名" value="{$address.userName}">
      </div>
    </div>
    <div class="am-form-group">
      <label for="user-phone" class="am-u-sm-3 am-form-label">手机号&nbsp;</label>
      <div class="am-u-sm-9">
        <input type="email" id="userPhone" placeholder="输入您的电话号码"  value="{$address.userPhone}">
      </div>
    </div>
    <div class="am-form-group">
      <label for="user-code" class="am-u-sm-3 am-form-label">邮政编码&nbsp;</label>
      <div class="am-u-sm-9">
        <input type="email" id="postCode" placeholder="邮政编码"  value="{$address.postCode}">
      </div>
    </div>
    <div class="am-form-group">
      <label for="user-province" class="am-u-sm-3 am-form-label">选择省份&nbsp;</label>
      <div class="am-u-sm-9">
        <select id="areaId1" onchange='javascript:getAreaList("areaId2",this.value,0)'>
          <option value="0">请选择</option>
          <volist name="areas" id="vo">
          <option value="{$vo.areaId}" <if condition="$address['areaId1'] == $vo['areaId']">selected</if>>{$vo.areaName}</option>
          </volist>
        </select>
        <span class="am-form-caret"></span> </div>
    </div>
    <div class="am-form-group">
      <label for="user-province" class="am-u-sm-3 am-form-label">选择城市&nbsp;</label>
      <div class="am-u-sm-9">
        <select id="areaId2" onchange="javascript:getAreaList('areaId3',this.value,0)">
          <option value="0">请选择</option>
        </select>
        <span class="am-form-caret"></span> </div>
    </div>
    <div class="am-form-group">
      <label for="user-district" class="am-u-sm-3 am-form-label">选择地区&nbsp;</label>
      <div class="am-u-sm-9">
        <select id="areaId3">
          <option value="0">请选择</option>
        </select>
        <span class="am-form-caret"></span> </div>
    </div>
    <div class="am-form-group">
      <label for="user-name" class="am-u-sm-3 am-form-label">详细地址&nbsp;</label>
      <div class="am-u-sm-9">
        <input type="text" id="address" placeholder="详细地址" value="{$address.address}">
      </div>
      <span class="am-form-caret"></span>
    </div>
  </div>
</div>
<div data-am-widget="navbar" class="am-navbar am-cf navbar-bottom" id="" style="padding-top: .7rem;padding-left: 1rem;padding-right: 1rem;">
  <button type="button" onClick="editAddreess()" class="am-btn am-btn-danger am-radius am-btn-block am-btn-sm">保存</button>
</div>
<script src="__ROOT__/Apps/Wap/View/default/assets/js/jquery.min.js"></script> 
<script src="__ROOT__/Apps/Wap/View/default/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/js/common.js"></script>
<script type="text/javascript">
$(function () {
	   <if condition="$address['areaId1'] !=0 ">
	   getAreaList("areaId2",{$address.areaId1},0,{$address.areaId2});
	   getAreaList("areaId3",{$address.areaId2},1,{$address.areaId3});
	   </if>
   });

function getAreaList(objId,parentId,t,id){
	   var params = {};
	   params.parentId = parentId;
	   $('#'+objId).empty();
	   if(t<1){
		   $('#areaId3').empty();
		   $('#areaId3').html('<option value="">请选择</option>');
	   }
	   var html = [];
	   $.post("{:U('Wap/Index/getAreasList')}",params,function(data,textStatus){
		    html.push('<option value="">请选择</option>');
			var json = MXC.toJson(data);
			if(json.status=='1' && json.list.length>0){
				var opts = null;
				for(var i=0;i<json.list.length;i++){
					opts = json.list[i];
					html.push('<option value="'+opts.areaId+'" '+((id==opts.areaId)?'selected':'')+'>'+opts.areaName+'</option>');
				}
			}
			$('#'+objId).html(html.join(''));
	   });
   }

function editAddreess(){
	var params = {};
	params.userName = $.trim($('#userName').val());
	params.userPhone = $.trim($('#userPhone').val());
	params.address = $.trim($('#address').val());
	params.postCode = $.trim($('#postCode').val());
	params.areaId1 = $('#areaId1').val();
	params.areaId2 = $('#areaId2').val();
	params.areaId3 = $('#areaId3').val();
	params.province = $('#areaId1').find("option:selected").text();
	params.city = $('#areaId2').find("option:selected").text();
	params.district = $('#areaId3').find("option:selected").text();
	if(params.userName==''){
	   $("#errmsg").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入您的姓名!");
	   $('#userName').focus();
	   return;
	}
	if(params.userPhone==''){
	   $("#errmsg").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入您的电话号码!");
	   $('#userPhone').focus();
	   return;
	}
	if(params.postCode==''){
	   $("#errmsg").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入您的邮政编码!");
	   $('#postCode').focus();
	   return;
	}
	if(params.areaId1=='0'){
	   $("#errmsg").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请选择省份!");
	   $('#areaId1').focus();
	   return;
	}
	if(params.areaId2=='0'){
	   $("#errmsg").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请选择城市!");
	   $('#areaId2').focus();
	   return;
	}
	if(params.areaId3=='0'){
	   $("#errmsg").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请选择地区!");
	   $('#areaId3').focus();
	   return;
	}
	if(params.address==''){
	   $("#errmsg").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入详细地址!");
	   $('#address').focus();
	   return;
	}
	$.post("{:U('Wap/Users/editAddress')}",params,function(data,textStatus){
	   var json = MXC.toJson(data);
		if(json.code=='1'){
			location.href= "{:U('Wap/Users/addressList')}?cartId={$cartId}";
		}else{
			$("#errmsg").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提交失败!");
		}
	});
}
</script>
</body>
</html>
